<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Shopping Cart</title>
    <script type="text/javascript" th:src="@{/js/updateCart.js}"></script>
</head>
<body>
<!-- 包含顶部模板 -->

<video autoplay loop muted playsinline id="background-video">
    <source th:src="@{/images/main_bg.mp4}" type="video/mp4">
</video>
<header th:replace="common/top"></header>


<div id="BackLink">
    <a th:href="@{/mainForm}">Return to Main Menu</a>
</div>
 <a style="margin:0 auto; display: block;  padding: 10px; width: 200px; height: 30px; background-color: #F9EFD6; color: black; border-radius: 60px; font-size: 20px; font-weight: bold;   text-align: center;margin-top: 20px; " href="/myPackageForm" >查看我的包裹</a>

<div id="Catalog">
    <div id="Cart">
        <h2>Shopping Cart</h2>

        <form th:action="@{/updatecart}" method="post">
            <table>
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th> </th>
                </tr>

                <tr th:if="${session.cart.numberOfItems == 0}">
                    <td colspan="8"><b>Your cart is empty.</b></td>
                </tr>

                <tr th:each="cartItem: ${session.cart.cartItemList}">
                    <td>
                        <a th:href="@{/itemForm(itemId=${cartItem.item.itemid})}"
                           th:text="${cartItem.item.itemid}"></a>
                    </td>
                    <td th:text="${cartItem.item.product.productid}"></td>
                    <td th:text="${cartItem.item.attr1 + ' ' +
                                     cartItem.item.attr2 + ' ' +
                                     cartItem.item.attr3 + ' ' +
                                     cartItem.item.attr4 + ' ' +
                                     cartItem.item.attr5 + ' ' +
                                     cartItem.item.product.name}"></td>
                    <td th:text="${cartItem.inStock}"></td>
                    <td>
                        <input type="text" th:id="${cartItem.item.itemid}"
                               onblur="updateCart(this.value, this.id)"
                               th:name="${cartItem.item.itemid}"
                               th:value="${cartItem.quantity}"/>
                    </td>
                    <td th:text="${#numbers.formatCurrency(cartItem.item.listprice)}"></td>
                    <td>
                        <label id="total" th:text="${#numbers.formatCurrency(cartItem.total)}"></label>
                    </td>
                    <td>
                        <a th:href="@{/removeCartItem(workingItemId=${cartItem.item.itemid})}"
                           class="Button">Remove</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="7" id="lastTD">
                        Sub Total: <label id="subtotal" th:text="${session.cart.subTotal}"></label>
                    </td>
                    <td> </td>
                </tr>
            </table>
        </form>

        <a th:if="${session.cart.numberOfItems > 0}"
           th:href="@{/newOrderForm}"
           class="Button">Proceed to Checkout</a>
    </div>

    <div id="MyList">
        <div th:if="${session.loginAccount != null and not #lists.isEmpty(session.loginAccount.listOption)}">
            <div th:replace="cart/includeMyList"></div>
        </div>
    </div>

    <div id="Separator"> </div>
</div>

<!-- 包含底部模板 -->
<footer th:replace="common/bottom"></footer>

<script type="text/javascript" >

    function updateCart(value, workingItemId) {

        console.log("updateCartJSServlet?quantity="+ value+"&workingItemId=" + workingItemId);
        sendRequest("http://localhost:8080/updateCartJSServlet?quantity="+ value+"&workingItemId=" + workingItemId);
        alert("Update Cart Success!");

    }

    function processResponse() {
        if (xmlHttpRequest.readyState == 4) {
            if (xmlHttpRequest.status == 200) {
                var resp = xmlHttpRequest.responseText;
                var array = resp.split(",");
                var quantity = document.getElementById("quantity");
                var total = document.getElementById("total");
                var subtotal = document.getElementById("subtotal");
                // quantity.innerText = array[0];
                // total.innerText = "$"+array[1];
                // subtotal.innerText = "$"+array[2];
            }
        }
    }
</script>
</body>
</html>